<template>
  <van-swipe :autoplay="3000">
    <van-swipe-item v-for="(image, index) in images" :key="index">
      <img v-lazy="image" />
    </van-swipe-item>
  </van-swipe>
</template>

<script>
import service from "../../utils/service";
import Vue from "vue";
import { Lazyload } from "vant";

Vue.use(Lazyload);

export default {
  data() {
    return {
      images: [],
    };
  },
  mounted() {
    service({
      url: "api/banner/list",
      method: "get",
    }).then((res) => {
      res.data.data.forEach((element) => {
        this.images.push(element.img);
      });
    });
  },
};
</script>

<style>
.van-swipe {
  width: 95%;
  height: 8.75rem;
  border-radius: 1.25rem;
  margin: 0.625rem;
  vertical-align: middle;
  background: #cccccc;
}

.van-swipe-item img {
  width: 100%;
}
</style>